@import "./mixin";

$text-large: 18px;
$text-big: 16px;
$text-medium: 14px;
$text-small: 12px;
$text-tiny: 10px;

$text-large-lh: 20px;
$text-big-lh: 18px;
$text-medium-lh: 16px;
$text-small-lh: 15px;
$text-tiny-lh: 12px;

$text-big-max-height3: 54px;
$text-medium-max-height3: 48px;
$text-samll-max-height3: 42px;
$text-big-max-height2: 36px;
$text-medium-max-height2: 32px;
$text-medium-max-height: 16px;
$text-small-max-height2: 30px;
$text-small-max-height: 15px;
$text-tiny-max-height: 12px;

.title-big {
  line-height: $text-big-lh;
  font-size: $text-big;
  max-height: $text-big-max-height2;
  color: #444;
  font-weight: bold;
  @include ellipsis2(3);
}
.title-medium {
  font-size: $text-medium;
  line-height: $text-medium-lh;
  max-height: $text-medium-max-height2;
  color: #444;
  font-weight: bold;
  @include ellipsis2(3);
}
.title-small {
  font-size: $text-small;
  line-height: $text-small-lh;
  max-height: $text-small-max-height2;
  color: #444;
  font-weight: bold;
  @include ellipsis2(2);
}
.sub-title-medium {
  line-height: $text-medium-lh;
  font-size: $text-medium;
  max-height: $text-medium-max-height2;
  color: #666;
  @include ellipsis2(2);
}
.sub-title {
  line-height: $text-small-lh;
  font-size: $text-small;
  max-height: $text-small-max-height;
  color: #666;
  @include ellipsis2(1);
}
.sub-title-tiny {
  line-height: $text-tiny-lh;
  font-size: $text-tiny;
  max-height: $text-tiny-max-height;
  color: #666;
  @include ellipsis2(1);
}
.third-title {
  line-height: $text-small-lh;
  font-size: $text-small;
  max-height: $text-small-max-height;
  color: #999;
  @include ellipsis2(1);
}
.third-title-tiny {
  line-height: $text-tiny-lh;
  font-size: $text-tiny;
  max-height: $text-tiny-max-height;
  color: #999;
  @include ellipsis2(1);
}
